.card-item {
    width: 300px;
    height: 300px;

    font-size: 32px;
    color: #fff;
    text-align: center;
    line-height: 300px;

    margin: 20px;
    background-color: #abc;

    /* 第一种方法：块状元素转成行内块元素 */
    /* display: inline-block; */

    /* 第二种方法：将元素进行浮动 */
    float: right;
}

.image-container {
    /* 第二种方法：将元素进行浮动 */
    clear: both;
    
    height: 200px;
    background-color: #f00;
}

#d1{
    width:400px;
    height: 400px;

background-color: #aaa;

position: relative;
left:400px;
top:400px;


}

#d2{
    width:100px;
    height:100px;
    background-color:rgb(160, 29, 29);
   position:absolute;
   right:100px;

}

#d3{
   width: 200px;

height:200px;
background-color: #f00;
position: absolute;

top:400px;
left:400px;


}
.first{
    left: 0px;

}

.second{
    left:400px;

}
.third{
    left: 800px
}